<template>
  <div>
    <!-- 顶部背景 -->
    <TopBg />
    <!-- 内容 -->
    <div class="content-container">
      <div class="content width display-flex">
        <div class="left">
          <LeftNavRandom :categoryList="categoryList" @changeCategory="changeCategory" />
        </div>
        <div class="middle">
          <MiddleContent :categoryId="categoryId" />
        </div>
        <div class="right">
          <RightValDate />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftNavRandom from './component/left-nav-random.vue'
import TopBg from './component/top-bg.vue'
import MiddleContent from './component/middle-content.vue'
import RightValDate from './component/right-val-date.vue'
import { getCategoryList } from '@/api/article'

export default {
  name: 'Home',
  components: {
    LeftNavRandom,
    TopBg,
    MiddleContent,
    RightValDate
  },
  data() {
    return {
      categoryList: [],
      categoryId: ''
    }
  },
  created() {
    this.getUserCategoryList()
  },
  methods: {
    // 获取分类列表
    async getUserCategoryList() {
      try {
        const res = await getCategoryList()
        if (res.code === 200) {
          this.categoryList = res.data
        }
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    changeCategory(id) {
      this.categoryId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  border-top: 1px solid black;
  background-color: #f2f3f5;
  padding: 20px;
}

.content {
  display: flex;
  margin-top: 30px;
  .left {
    flex: 1.5;
  }
  .middle {
    flex: 7;
  }
  .right {
    flex: 3;
  }
}
</style>
